.kiana-mei-button {
    position: relative;
    font-weight: $font-weight-normal;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    outline: none;
    padding: $base-padding;
    transition: all .3s ease;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
    box-shadow: $box-shadow-default;
    border-radius: .05rem;
    letter-spacing: .01rem;
    .kiana-mei-button-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;    
    }
    &.disabled,
    &[disabled] {
        cursor: not-allowed;
        opacity: $disabled-opacity;
        box-shadow: none;
        pointer-events: none;
        > * {
            pointer-events: none;
        }
    }
}

.kiana-mei-button-lg {
    @include button-size($font-size-lg, $line-height-lg, $padding-lg);
}

.kiana-mei-button-md {
    @include button-size($font-size-base, $line-height-base, $base-padding);
}

.kiana-mei-button-sm {
    @include button-size($font-size-sm, $line-height-sm, $padding-sm);
}

@each $key, $val in $theme-colors {
    @if $key == 'default' {
        .kiana-mei-button-#{$key} {
            @include button-style($gray-600, lighten($val, 10%), #ccc);
        }
        .kiana-mei-button-#{$key}.kiana-mei-button-loading {
            box-shadow: 0 0vw .04rem darken($color: $val, $amount: 10%);
        }
        .kiana-mei-button-#{$key}-active {
            background-color: darken($color: $val, $amount: 10%);
        }
    }
    @else if $key == 'text' {
        .kiana-mei-button-#{$key} {
            @include button-style($blue, transparent, transparent);
            box-shadow: none;
        }
        .kiana-mei-button-#{$key}.kiana-mei-button-loading {
            box-shadow: none;
        }
        .kiana-mei-button-#{$key}-active {
            background-color: transparent;
        }
    }
    @else if $key != 'default' && $key != 'text' {
        .kiana-mei-button-#{$key} {
            @include button-style($white, $val);
        }
        .kiana-mei-button-#{$key}-active {
            @include button-style($white, darken($color: $val, $amount: 10%));
        }
        .kiana-mei-button-#{$key}.kiana-mei-button-loading {
            box-shadow: 0 0 .04rem darken($color: $val, $amount: 10%);
        }
    }
}

.kiana-mei-buttonpple {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.kiana-mei-button-loading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.kiana-mei-button-bg {
    position: relative;
}

.kiana-mei-button-ripple{
    position:relative;
    cursor:pointer;
    display:inline-block;
    overflow:hidden;
    text-align: center;
    -webkit-tap-highlight-color:transparent;
    z-index:1;
    justify-content: center;
    align-items: center;
    display: flex;
}
.kiana-mei-button-ripple .kiana-mei-button-ripple-animation {
    position:absolute;
    border-radius:50%;
    opacity:0;
    // background:rgba(255,255,255,0.1);
    transition:all 0.7s ease-out;
    transition-property:transform, opacity, -webkit-transform;
    -webkit-transform:scale(0);
    transform:scale(0);
    pointer-events:none
}
